<template>
  <div class="course cont">
    <h1>这是教程</h1>
    <div class="list">
      <course-item
        v-for="item in listData"
        :key="item.id"
        :title="item.name"
        :author="item.author"
        :info="item.desc"
        :img="item.cover"
        :id="item.id"
      ></course-item>
    </div>
  </div>
</template>
<script>
import CourseItem from '@/components/CourseItem.vue';
import { getCourse } from '@/api'

export default {
  name: "Course",
  components: {
    CourseItem
  },
  data() {
    return {
      listData:[]
    }
  },
  created() {
    getCourse().then(res=>{
      console.log(res.data.data)
      this.listData = res.data.data;
    })
  },
}
</script>

<style lang="less">
.course{
  img{width:100px;}
}
</style>